<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.*"%>
<%@ page import="java.text.*"%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" >
    <meta name="keywords">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/layui.css" />
    <title>音律管理员内部结界</title>
    <style type="text/css">
        .topnav{
            height: 65px;
            width: 150px;
            overflow: hidden;
            background-color: #e9e9e9;
        }

    </style>
    <script src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/css/layui.js" media="all" ></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/layui.js" charset="utf-8"></script>
    <script>
        $(function() {
            $(".meun-item").click(function() {
                $(".meun-item").removeClass("meun-item-active");
                $(this).addClass("meun-item-active");
                var itmeObj = $(".meun-item").find("img");
                itmeObj.each(function() {
                    var items = $(this).attr("src");
                    items = items.replace("_grey.png", ".png");
                    items = items.replace(".png", "_grey.png")
                    $(this).attr("src", items);
                });
                var attrObj = $(this).find("img").attr("src");
                ;
                attrObj = attrObj.replace("_grey.png", ".png");
                $(this).find("img").attr("src", attrObj);
            });
            $("#topAD").click(function() {
                $("#topA").toggleClass(" glyphicon-triangle-right");
                $("#topA").toggleClass(" glyphicon-triangle-bottom");
            });
            $("#topBD").click(function() {
                $("#topB").toggleClass(" glyphicon-triangle-right");
                $("#topB").toggleClass(" glyphicon-triangle-bottom");
            });
            $("#topCD").click(function() {
                $("#topC").toggleClass(" glyphicon-triangle-right");
                $("#topC").toggleClass(" glyphicon-triangle-bottom");
            });
            $(".toggle-btn").click(function() {
                $("#leftMeun").toggleClass("show");
                $("#rightContent").toggleClass("pd0px");
            })
        })

        layui.use('element', function(){
            var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

            //监听导航点击
            element.on('nav(demo)', function(elem){
                layer.msg(elem.text());
            });
        });
    </script>

    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/common.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/slide.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/flat-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/jquery.nouislider.css">
</head>

<body style="overflow:hidden" class="container-filuid">
<div id="wrap" style="background-color: white">

    <!-- 左侧菜单栏目块 -->
    <div class="leftMeun" id="leftMeun">
        <div id="logoDiv" style="padding: 0;">
            <p id="logoP"><img id="logo" alt="左右结构项目" src="${pageContext.request.contextPath }/img/admin/logo.png" width="190px" style="height: 70px;"></p>
        </div>
        <div class="meun-title">账号管理</div>
        <p style="padding-left: 12px;"><a href="${pageContext.request.contextPath }/welcome" target="mainFrame"><img src="${pageContext.request.contextPath }/img/admin/icon_source.png">欢迎回来</a></p>
        <p style="padding-left: 12px;"><a href="${pageContext.request.contextPath }/admin/lastSinger" target="mainFrame"><img src="${pageContext.request.contextPath }/img/admin/icon_chara_grey.png">歌手管理</a></p>
        <p style="padding-left: 12px;"><a href="${pageContext.request.contextPath }/admin/lastSong" target="mainFrame"><img src="${pageContext.request.contextPath }/img/admin/icon_user_grey.png">歌曲管理</a></p>
        <p style="padding-left: 12px;"><a href="${pageContext.request.contextPath }/admin/lastUser" target="mainFrame"><img src="${pageContext.request.contextPath }/img/admin/icon_change_grey.png">用户管理</a></p>
        <p style="padding-left: 12px;"><a href="${pageContext.request.contextPath }/ticket" target="mainFrame"><img src="${pageContext.request.contextPath }/img/admin/icon_house_grey.png">票务管理</a></p>
        <p style="padding-left: 12px;"><a href="${pageContext.request.contextPath }/admin/lastMV" target="mainFrame"><img src="${pageContext.request.contextPath }/img/admin/icon_rule_grey.png">MV管理</a></p>
        <p style="padding-left: 12px;"><a href="${pageContext.request.contextPath }/admin/go" target="mainFrame"> <img src="${pageContext.request.contextPath }/img/admin/icon_card_grey.png">管理员信息</a></p>
        <p style="padding-left: 12px;"><a href="${pageContext.request.contextPath }/admin/lastCD" target="mainFrame"> <img src="${pageContext.request.contextPath }/img/admin/icon_char_grey.png">专辑管理</a></p>
    </div>
    <!-- 右侧具体内容栏目 -->
    <div id="rightContent">
        <!-- Tab panes -->
        <div class="tab-content" style="width: 100%;">
            <!-- 资源管理模块 -->
            <div role="tabpanel" class="tab-pane active" id="sour">
                <div class="check-div form-inline container-fluid" >
                    <div class="row" style="background-color: ghostwhite" >

                        <div class="col-lg-3">

                        </div>

                        <div class="col-lg-8">
                            <ul class="layui-nav" lay-filter="demo">
                                <li class="layui-nav-item" style="float: right;">
                                    <a href="${pageContext.request.contextPath }/login"  style="color: deepskyblue;font-size: 20px;font-family: '微软雅黑';">
                                        <img src="${pageContext.request.contextPath }//t.cn/RCzsdCq" class="layui-nav-img">用户登陆</a>
                                    <dl class="layui-nav-child">
                                        <dd><a href="#"  style="color: deepskyblue;font-size: 15px;font-family: '微软雅黑';">修改信息</a></dd>
                                        <dd><a href="#"  style="color: deepskyblue;font-size: 15px;font-family: '微软雅黑';">安全管理</a></dd>
                                        <dd><a href="#"  style="color: deepskyblue;font-size: 15px;font-family: '微软雅黑';">退了</a></dd>
                                    </dl>
                                </li>
                                <li class="layui-nav-item" style="float: right;">
                                    <a href="#"  style="color: deepskyblue;font-size: 20px;font-family: '微软雅黑';">个人中心<span class="layui-badge-dot"></span></a>
                                </li>
                                <li class="layui-nav-item" style="float: right;">
                                    <a href="${pageContext.request.contextPath }/admin/index"  style="color: deepskyblue;font-size: 20px;font-family: '微软雅黑';">控制台<span class="layui-badge">9</span></a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>

        </div>

        <iframe name="mainFrame" src="${pageContext.request.contextPath }/welcome" height="720px" width="100%" frameborder="no" >

        </iframe>

    </div>
</div>
</div>
</div>

<script src="${pageContext.request.contextPath }/js/jquery.nouislider.js"></script>

<!-- this page specific inline scripts -->
<script>
    //min/max slider
    function huadong(my, unit, def, max) {
        $(my).noUiSlider({
            range: [0, max],
            start: [def],
            handles: 1,
            connect: 'upper',
            slide: function() {
                var val = Math.floor($(this).val());
                $(this).find(".noUi-handle").text(
                    val + unit
                );
                console.log($(this).find(".noUi-handle").parent().parent().html());
            },
            set: function() {
                var val = Math.floor($(this).val());
                $(this).find(".noUi-handle").text(
                    val + unit
                );
            }
        });
        $(my).val(def, true);
    }
    huadong('.slider-minmax1', "分钟", "5", 30);
    huadong('.slider-minmax2', "分钟", "6", 15);
    huadong('.slider-minmax3', "分钟", "10", 60);
    huadong('.slider-minmax4', "次", "2", 10);
    huadong('.slider-minmax5', "天", "3", 7);
    huadong('.slider-minmax6', "天", "8", 10);
</script>
</body>

</html>
